<script lang="ts" setup>
import { House, ArrowRight } from "@element-plus/icons-vue"
import { onMounted, reactive } from 'vue'
import { Refresh, Timer } from "@element-plus/icons-vue";
import createAxios from "../request";
import { ElMessage } from "element-plus";

let axios = createAxios();
const tableData = reactive<User[]>([]);

interface User {
  "attend_id": number,
  "date": string,
  "ename": string,
  "state": string,
  "clockIn_time": string,
  "clockOut_time": string,
  "reattend_reason": string
}
onMounted(() => {
  axios({
    url: "/selectReattendace",
    method: "GET",
  }).then(res => {
    console.log(res.data);
    tableData.push(...res.data);
  }).catch(err => {
    ElMessage.error("访问失败");
  })
})

const reattendance = (user: User) => {
  console.log(tableData);
  axios({
    url: "/reattendaceCount",
    method: "POST",
    data: {
      attend_id: user.attend_id,
      date: user.date,
      ename: user.ename,
      state: user.state,
      clockIn_time: user.clockIn_time,
      clockOut_time: user.clockOut_time,
      reattend_reason: user.reattend_reason
    }
  }).then(res => {
    console.log(res.data);
    if (res.data == '1') {
      alert("申请补签成功");
      // 刷新页面
      location.reload();
    }
  }).catch(err => {
    ElMessage.error("访问失败");
  })
}

const options = [
  {
    value: '忘记打卡',
    label: '忘记打卡',
  },
  {
    value: '设备故障',
    label: '设备故障',
  },
  {
    value: '服务故障',
    label: '服务故障',
  },
  {
    value: '其它',
    label: '其它',
  },
]

</script>

<template>
  <el-container id="mainView">
    <el-header style="background-color: #272822; color: #E5E5E5; line-height: 60px; font-size: 27px;">考勤补签</el-header>
    <el-footer
      style="height: 30px; line-height: 30px; background-color: #4E5246; border-bottom:1px solid #7A7A7A; border-top:1px solid #7A7A7A;">
      <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 30px;">
        <el-breadcrumb-item :to="{ path: '/home/homepage' }"><el-icon>
            <House />
          </el-icon>首页</el-breadcrumb-item>
        <el-breadcrumb-item>时间管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/punchCard' }">考勤打卡</el-breadcrumb-item>
        <el-breadcrumb-item>考勤补签</el-breadcrumb-item>
      </el-breadcrumb>
    </el-footer>
    <el-main style="padding-bottom: 0%;">
      <div class="table">
        <el-table :data="tableData" border style="width: 96vw;">
          <el-table-column label="日期" width="130px">
            <template #default="scope">
              {{ scope.row.date }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="100px">
            <template #default="scope">
              {{ scope.row.ename }}
            </template>
          </el-table-column>
          <el-table-column label="判定" width="100px">
            <template #default="scope">
              <span v-if="scope.row.state === 5" type="primary" size="mini">迟到
              </span>
              <span v-if="scope.row.state === 6" type="primary" size="mini">早退
              </span>
              <span v-if="scope.row.state === 7" type="primary" size="mini">旷工
              </span>
            </template>
          </el-table-column>
          <el-table-column label="上班时间" width="280px">
            <template #default="scope">
              <el-time-select :prefix-icon="Timer" v-model="scope.row.clockIn_time" format="HH:mm:ss"
                style="width: 240px" start="06:00" step="00:15" end="24:00" placeholder="Select time" />
            </template>
          </el-table-column>
          <el-table-column label="下班时间" width="280px">
            <template #default="scope">
              <el-time-select :prefix-icon="Timer" v-model="scope.row.clockOut_time" format="HH:mm:ss"
                style="width: 240px" start="06:00" step="00:15" end="24:00" placeholder="Select time" />
            </template>
          </el-table-column>
          <el-table-column label="原因" width="200px">
            <template #default="scope">
              <el-select v-model="scope.row.reattend_reason" placeholder="请选择原因" style="width: 150px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="reattendance(scope.row)">补签</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
#mainView {
  height: 100%;
  width: 100%;
}

.table {
  display: flex;
  justify-content: center;
}

.example-basic .el-date-editor {
  margin: 8px;
}
</style>